<template>
  <div>
     <h3>欢迎光临_vue开发的收银系统_水果店</h3>
     <table border="1">
     <th>苹果10￥/斤，折扣《 8折 》</th>
     <tbody>
      <tr>
        <td>请输入你要购买的斤数 <input type="number" v-model.number="jin"></td>
      </tr>
      <tr>
        <td><button @click="fn">结账买单</button></td>    
      </tr>  
      <tr>
        <td>结账单:总价:{{sum}}￥元 折后价:{{jq}}￥元 省了:{{sq}}￥元</td>
      </tr>
     </tbody>
     </table>
   </div>
</template>
 
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      jin:0,
      sum:0,
      jq:0,
      sq:0,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    fn(){
      this.sum=this.jin*10
      this.jq=this.jin*10*0.8
      this.sq=this.jin*10*0.2
    },
  }
};
</script>

<style scoped>
     h3 {
      text-align: center;
     }
     table {
      text-align: center;
      margin: 0 auto;
     }
</style>